<template>
  <div class="category">
    <header class="category-header wrap">
      <router-link to="/search">
        <van-search  background="#f1f1f1" shape="round" placeholder="搜索蜜芽商品" />
      </router-link>
    </header>
    <section class="search-wrap">
      <div class="nav-side-wrapper">
        <list-scroll :scroll-data="items" class="nav-side-item">
          <ul class="nav-side">
            <li
              v-for="(item,index) in items"
              :key="index"
              v-text="item.text"
              :class="{'active' : currentIndex === index}"
              @click="selectMenu(index,item.pid)"
            ></li>
          </ul>
        </list-scroll>
      </div>

      <div class="swiper-container" ref="searchWrap">
        <list-scroll :scroll-data="list" v-if="list.length!=0">
          <div class="swiper-wrapper">
            <img
              class="title-img"
              v-if="list.son_category[0].title==''"
              :src="list.son_category[0].categorys[0].banner_image"
            />
            <div
              class="swiper-slide"
              v-for="(category,index) in list.son_category"
              :key="index"
              v-show="category.title!=''"
            >
              <p class="catogory-title">{{category.title}}</p>
              <div class="category-list">
                <div
                  class="product-item"
                  v-for="(product,index) in category.categorys"
                  :key="index"
                  @click="selectProduct(index,product.p_id)"
                >
                  <!-- <a :href="`s/b${product.p_id}_jh1.html`"> -->
                  <img :src="product.banner_image" class="product-img" />
                  <p v-text="product.c_name" class="product-title"></p>
                  <!-- </a> -->
                </div>
              </div>
            </div>
          </div>
        </list-scroll>
      </div>
    </section>
  </div>
</template>

<script>
import { get } from "utils/http";
import { Toast } from "vant";
import axios from "axios";
import listScroll from "../../components/common/list-scroll";
export default {
  data() {
    return {
      currentIndex: 0,
      list: [],
      pid: "6811",
      title: "",
      scrollY: "",
      items: [
        { text: "独家甄选", pid: "6811" },
        { text: "独代品牌", pid: "18820" },
        { text: "超级工厂", pid: "18657" },
        { text: "奶粉辅食", pid: "32" },
        { text: "宝宝用品", pid: "68" },
        { text: "美妆护肤", pid: "73" },
        { text: "个护清洁", pid: "14926" },
        { text: "服饰鞋包", pid: "2537" },
        { text: "童装童鞋", pid: "83" },
        { text: "食品保健", pid: "78" },
        { text: "家居厨具", pid: "74" },
        { text: "玩具书籍", pid: "70" },
        { text: "家用电器", pid: "17282" },
        { text: "手机数码", pid: "14913" },
        { text: "孕产母乳", pid: "67" },
        { text: "汽车用品", pid: "18405" }
      ],
      isLoading: true
    };
  },
  components: {
    listScroll
  },
  methods: {
    selectMenu($index, pid) {
      this.currentIndex = $index;
      this.pid = pid;
      axios({
        url: `https://m.miabaobei.com/search/getCategoryClassify?pid=${this.pid}`
      }).then(res => {
        this.isLoading = true;
        if (res.data.length === 20) {
          this.$el.querySelector(".loading_text").style.display = "none";
          this.showMessage();
          return;
        }
        this.list = res.data.categorysInfos;
        let _title = res.data.categorysInfos.son_category;
      });
    },
    setSearchWrapHeight() {
      let $screenHeight = document.documentElement.clientHeight;
      this.$refs.searchWrap.style.height = $screenHeight - 100 + "px";
    },
    selectProduct(idx, pid) {
      this.$router.push({
        // name: "Classfiylist",
        // query: {
        //   site: `s/b${pid}_jh1.html`
        // }
        path:`/Classfiylist/${pid}`
      });


      // this.$router.push({ path: `/MsEntry/${this.pid[0].pid}` });
    }
  },
 async created(){
    await axios({
      url: `https://m.miabaobei.com/search/getCategoryClassify?pid=${this.pid}`
    }).then(res => {
      this.isLoading = false;
      this.list = res.data.categorysInfos;
      console.log(this.list);
    });
    this.setSearchWrapHeight();
  },
  // mounted() {
  //   console.log(this.pid);
   
  // }
};
</script>

<style lang="stylus">
@import '~assets/border.styl';

.title-img {
  width: 90%;
  margin: 10px 5%;
}

.category {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;

  header {
    height: 0.5rem;
    z-index: 1;
  }

  section {
    flex: 1;
    display: flex;
    height: 100%;
    overflow: hidden;
    padding-top: 0.02rem;

    .nav-side-wrapper {
      width: 25%;
      display: flex;
      justify-content: center;
      background: #f6f6f6;
      height: 100%;

      .nav-side-item {
        width: 100%;
        height: 5.65rem;

        >ul {
          width: 100%;

          >li {
            height: 0.5rem;
            text-align: center;
            line-height: 0.5rem;
            font-size: 0.14rem;
            position: relative;

            &.active {
              color: #ea4141;
              background: #fff;

              &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 0.02rem;
                height: 0.5rem;
                border-left: 2px solid #ea4241;
              }
            }
          }
        }
      }
    }

    .swiper-container {
      width: 75%;
      padding-top: 0.1rem;

      .swiper-wrapper {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .swiper-slide {
          display: flex;
          flex-wrap: wrap;

          .catogory-title {
            // flex 1
            width: 100%;
            text-indent: 0.16rem;
          }

          .category-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            // justify-content: center;
            .product-item {
              width: 25%;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 4px 0;
              margin-right: 5px;
              margin-left: 15px;

              img {
                width: 100%;
              }

              p.product-title {
                font-size: 0.1rem;
                color: #b6b6b6;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>